<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>

<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>

</head>

<body>

<h2>Your Menu</h2>

<style type="text/css">#cssmenu {
       float: left;
	width:100%;
	background:#efefef;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #666;
	}

#cssmenu ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
	}
#cssmenu li {
	display:inline;
	margin:0;
	padding:0;
	}
#cssmenu a {
	float:left;
	background:url('menu_assets/images/tableftF.gif') no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	}
#cssmenu a span {
	float:left;
	display:block;
	background:url('menu_assets/images/tabrightF.gif') no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#666;
	}
	
/* Commented Backslash Hack hides rule from IE5-Mac */
#cssmenu a span {float:none;}
/* End IE5-Mac hack */

#cssmenu .active a span,
#cssmenu a:hover span {color:#FFFFFF;}

#cssmenu .active a,
#cssmenu a:hover {background-position: 0 -42px;}

#cssmenu .active a span,
#cssmenu a:hover span {background-position: 100% -42px;}</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>

<h2>Installation Instructions</h2>

<ol>
   <li>Upload the <code>menu_assets</code> folder to the root directory of your website. This is usually where your <code>index.html</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code>&lt;head>&lt;/head></code> tags.<textarea class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"></textarea></li>
   <li>Copy and paste the html below where ever you want your menu to show up.<textarea class='html'><div id='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>

<h2>Notes</h2>
<ol>
   <li>If you run into a problem getting your menu to work or have suggestions for the site please <a href='http://cssmenumaker.com/resources/contact'>Contact Us</a> and let us know. We will try to help as much as possible.</li>
</ol>

</body>
</html>